<template>
  <div>
    <p class="p-5 bg-light text-center text-muted border rounded" v-if="showEmptyDevice">
      暂无生物资产信息
    </p>

    <el-tabs
      v-else
      v-model="activeTab"
      v-loading="loading"
      class="el-tabs--shadowless"
      type="border-card"
    >
      <el-tab-pane name="all" label="所有">
        <device-chart :farm-id="farmId" :devices="devices"></device-chart>
      </el-tab-pane>
      <el-tab-pane v-for="device in devices" :key="device.device" :name="device.device">
        <div slot="label" class="after-tab-title">
          <span>{{ device.device_name }}</span>
          <small>
            <i
              class="fa fa-feed ml-1"
              :class="device.device_status === 0 ? 'text-primary' : 'text-muted'"
            ></i>
          </small>
        </div>
        <device-chart :device-id="device.device" :devices="devices"></device-chart>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DeviceChart from '@/credit/views/city/self/after/rfid/DeviceChart'

import { getDevice } from '@/credit/views/city/self/after/rfid/index'

export default {
  components: {
    DeviceChart,
  },
  props: {
    farmId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      activeTab: 'all',
      // 设备列表
      devices: [],
    }
  },
  computed: {
    showEmptyDevice() {
      return !this.loading && this.devices.length === 0
    },
  },
  watch: {
    farmId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData() {
      this.loading = true
      getDevice({
        farmId: this.farmId,
        deviceType: 'RFID',
      })
        .then(devices => {
          this.devices = devices
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
